<template>
  <!-- 使用组件 -->
  <!-- UNI 分段器组件 -->
  <!-- 头部标题 -->
  <view>
    <view class="home_tab_title">
      <view class="home_title_box">
        <view class="tutke_inner">
          <uni-segmented-control
            :current="current"
            :values="items"
            @clickItem="onClickItem"
            style-type="text"
            active-color="#d4237a"
          ></uni-segmented-control>
        </view>
        <view class="home_icon iconfont iconsearch"></view>
      </view>
    </view>
    <!-- 头部标题 -->
    <!-- 4个组件页面 -->
    <view class="home_body">
      <view v-if="current === 3">
        <home-album></home-album>
      </view>
      <view v-if="current === 1">
        <home-category></home-category>
      </view>
      <view v-if="current === 2">
        <home-new></home-new>
      </view>
      <view v-if="current === 0">
        <home-recommend></home-recommend>
      </view>
    </view>
    <!-- 4个组件页面结束 -->
  </view>
</template>
<script>
/* 引入组件 */
import homeAlbum from "./home-album";
import homeCategory from "./home-category";
import homeNew from "./home-new";
import homeRecommend from "./home-recommend";
/* 引入分段器组件 */
import { uniSegmentedControl } from "@dcloudio/uni-ui";
import regeneratorRuntime from "../../lib/runtime/runtime";

export default {
  /* 挂载组件 */
  components: {
    homeAlbum,
    homeCategory,
    homeNew,
    homeRecommend,
    uniSegmentedControl
  },
  data() {
    return {
      /* 分段器数据 */
      items: ["推荐", "分类", "最新", "专辑"],
      /*   { title: 推荐 },
        { title: 分类 },
        { title: 最新 },
        { title: 专辑 } */

      current: 1
    };
  },
  methods: {
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }
    }
  },
  computed: {}
};
</script>
<style lang="less" scoped>
.home_tab_title {
  position: relative;
  .tutke_inner {
    width: 60%;
    margin: 0 auto;
  }
  .home_icon {
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
  }
}
</style>